<template>
  <!-- 哈希值弹窗 -->
  <van-popup
    class="popupview"
    v-model:show="isShowPopup"
    :style="{
      width: '80%',
      'background-color': 'transparent',
    }"
    :close-on-click-overlay="false"
    zIndex="999996"
    teleport="body"
  >
    <!-- 光环 -->
    <img class="gh" src="/image/inviteFriends/mining-gh-icon.png" />
    <!-- 底部渐变色 -->
    <div class="box">
      <!-- scroll -->
      <div class="box-scroll hideScrollBar">
        <!-- 好友奖励 -->
        <div class="box-title items-center">
          <img class="box-title-icon" src="/image/title-blue-icon.svg" />
          <div class="box-title-text">{{ $t("inviteFriends.hyfl") }}</div>
          <img class="box-title-icon" src="/image/title-blue-icon.svg" />
        </div>

        <div class="box-hyfl">
          <div class="box-hyfl-content items-center">
            <img
              class="box-hyfl-bg"
              src="/image/inviteFriends/mining-userbg-icon1.svg"
            />
            <div class="box-hyfl-content-left items-center">
              <ImgNuxt
                class="box-hyfl-avatar"
                :src="inviterInfo.avatar || file.avatarDefault"
                :placeholder="file.avatarDefault"
                isHttp
              ></ImgNuxt>
              <!-- 信息 -->
              <div class="box-hyfl-info">
                <div class="items-center">
                  <!-- 会员等级 -->
                  <img
                    v-if="inviterInfo.vipLevel == 0"
                    class="box-hyfl-level"
                    src="/image/inviteFriends/level0.svg"
                  />
                  <img
                    v-else-if="inviterInfo.vipLevel == 1"
                    class="box-hyfl-level"
                    src="/image/inviteFriends/level1.svg"
                  />
                  <img
                    v-else-if="inviterInfo.vipLevel == 2"
                    class="box-hyfl-level"
                    src="/image/inviteFriends/level2.svg"
                  />
                  <img
                    v-else-if="inviterInfo.vipLevel == 3"
                    class="box-hyfl-level"
                    src="/image/inviteFriends/level3.svg"
                  />
                  <img
                    v-else-if="inviterInfo.vipLevel == 4"
                    class="box-hyfl-level"
                    src="/image/inviteFriends/level4.svg"
                  />
                  <img
                    v-else-if="inviterInfo.vipLevel >= 5"
                    class="box-hyfl-level"
                    src="/image/inviteFriends/level5.svg"
                  />
                  <div class="box-hyfl-name">
                    {{
                      inviterInfo.nickname
                        ? inviterInfo.nickname.substring(0, 11)
                        : "--"
                    }}
                    <span style="margin-left: -4px">{{
                      inviterInfo.nickname && inviterInfo.nickname.length > 11
                        ? "..."
                        : ""
                    }}</span>
                  </div>
                </div>
                <!-- 送您 bdc -->
                <div class="box-hyfl-info-bottom items-center">
                  <div class="box-hyfl-name-desc">
                    {{ $t("inviteFriends.snText") }}
                  </div>
                  <div class="box-hyfl-name-value">
                    {{ inviterInfo.regPrize }} BDC
                  </div>
                </div>
              </div>
            </div>
            <!-- 待发放/已发放 -->
            <div class="box-hyfl-btn">
              {{
                $t(
                  inviterInfo.regPrizeStatus != 1
                    ? "inviteFriends.dff"
                    : "inviteFriends.yff"
                )
              }}
            </div>
          </div>
          <!-- 分割线 -->
          <div class="line items-center">
            <div class="line-left"></div>
            <div class="line-text">{{ $t("inviteFriends.nxywc") }}</div>
            <div class="line-right"></div>
          </div>
          <!-- 邮箱验证 -->
          <div class="box-hyfl-item items-center">
            <div class="box-hyfl-item-left items-center">
              <img
                class="box-hyfl-item-left-img"
                src="/image/inviteFriends/mining-yxyz-icon.svg"
              />
              <div class="box-hyfl-item-title">
                {{ $t("inviteFriends.tgyxyz") }}
              </div>
            </div>
            <div class="box-hyfl-item-right">
              <div
                v-if="inviterInfo.bindEmailStatus != 1"
                class="box-hyfl-item-right-btn"
                @click="jumpPage('bindAccountList', true)"
              >
                {{ $t("inviteFriends.ywcText") }}
              </div>
              <img
                v-else
                class="box-hyfl-item-right-img"
                src="/image/inviteFriends/mining-btn-isuccess.svg"
              />
            </div>
          </div>
        </div>
        <!-- 新人福利 -->
        <div class="box-title box-title-second items-center">
          <img class="box-title-icon" src="/image/title-blue-icon.svg" />
          <div class="box-title-text">{{ $t("inviteFriends.xrjl") }}</div>
          <img class="box-title-icon" src="/image/title-blue-icon.svg" />
        </div>
        <div class="box-xrjl">
          <div v-if="mnjy" class="box-xrjl-item">
            <div class="box-xrjl-item-left items-center">
              <img
                class="box-xrjl-item-left-img"
                src="/image/inviteFriends/mnzh-icon.svg"
              />
              <div>
                <div class="box-xrjl-item-left-title">
                  {{ $t("inviteFriends.mnylzs") }}
                </div>
                <div class="box-xrjl-item-left-desc">
                  {{ $t("inviteFriends.mnylzsDesc").split("xx")[0] }}
                  50
                  {{
                    $t("inviteFriends.mnylzsDesc")
                      .split("xx")[1]
                      .split("xxx")[0]
                  }}
                  {{ mnjy.reward.value }}
                  BDC
                </div>
              </div>
            </div>
            <div class="box-xrjl-item-bottom items-center">
              <div class="box-xrjl-item-bottom-left items-center">
                <img
                  class="box-xrjl-item-bottom-left-bdc-img"
                  src="/image/inviteFriends/mining-bdc-icon.svg"
                />
                <div class="box-xrjl-item-bottom-left-bdc">
                  +{{ mnjy.reward.value }}
                </div>
                <!-- 进度条 -->
                <van-progress
                  class="box-xrjl-item-bottom-left-progress"
                  :percentage="
                    (Number(mnjy.data.progress) /
                      Number(mnjy.data.progressTarget)) *
                    100
                  "
                  stroke-width="7"
                  track-color="#d7ddec"
                  color="#007BFF"
                  :show-pivot="false"
                />
                <div class="box-xrjl-item-left-desc">
                  {{ mnjy.data.progress }}/{{ mnjy.data.progressTarget }}
                </div>
              </div>
              <!-- 领取 -->
              <div
                v-if="mnjy.status == 0"
                class="box-xrjl-item-bottom-right"
                @click.stop="jumpPage('demoMarket', true)"
              >
                {{ $t("inviteFriends.ywcText") }}
              </div>
              <van-popover v-else class="popoverMining" placement="bottom">
                <div class="popoverMining-alert">
                  {{ $t("inviteFriends.goDesc") }}
                </div>
                <template #reference>
                  <div class="box-xrjl-item-bottom-right">
                    {{
                      $t(
                        mnjy.status != 0
                          ? "inviteFriends.klq"
                          : "inviteFriends.ywcText"
                      )
                    }}
                  </div>
                </template>
              </van-popover>
            </div>
          </div>
          <!-- 老版本无法领取 bdc,就不展示这个任务 -->
          <!-- v-if="isShowLiveTask" -->
          <div v-if="false" class="box-xrjl-item">
            <div class="box-xrjl-item-left items-center">
              <img
                class="box-xrjl-item-left-img"
                src="/image/inviteFriends/kzb-icon.svg"
              />
              <div>
                <div class="box-xrjl-item-left-title">
                  {{ $t("inviteFriends.kzbhd") }}
                </div>
                <div class="box-xrjl-item-left-desc">
                  {{ $t("inviteFriends.kzbhdDesc").split("xxx")[0] }}
                  180
                  {{ $t("inviteFriends.kzbhdDesc").split("xxx")[1] }}
                </div>
              </div>
            </div>
            <div class="box-xrjl-item-bottom items-center">
              <div class="box-xrjl-item-bottom-left items-center"></div>
              <div
                class="box-xrjl-item-bottom-right"
                @click="jumpPage('live', true)"
              >
                {{ $t("inviteFriends.ywcText") }}
              </div>
            </div>
          </div>
          <div v-if="sccz" class="box-xrjl-item" style="margin-bottom: 0px">
            <div class="box-xrjl-item-left items-center">
              <img
                class="box-xrjl-item-left-img"
                src="/image/inviteFriends/zy-icon.svg"
              />
              <div>
                <div class="box-xrjl-item-left-title">
                  {{ $t("inviteFriends.wcsccz") }}
                </div>
                <div class="box-xrjl-item-left-desc">
                  {{ $t("inviteFriends.wcscczDesc") }}
                </div>
              </div>
            </div>
            <div class="box-xrjl-item-bottom items-center">
              <div class="box-xrjl-item-bottom-left items-center">
                <img
                  class="box-xrjl-item-bottom-left-bdc-img"
                  src="/image/inviteFriends/mining-bdc-icon.svg"
                />
                <div class="box-xrjl-item-bottom-left-bdc">
                  +{{ sccz.reward.value }}
                </div>
              </div>
              <img
                v-if="sccz.status != 0"
                class="box-hyfl-item-right-img"
                src="/image/inviteFriends/mining-btn-isuccess.svg"
              />
              <div
                v-else
                class="box-xrjl-item-bottom-right"
                @click="jumpPage('pledge')"
              >
                {{ $t("inviteFriends.ywcText") }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 今日是否继续展示 -->
      <div v-if="false" class="box-bottom items-center">
        <img
          v-if="isSelect"
          class="box-bottom-select"
          src="/image/inviteFriends/mining-yxz-icon.svg"
          @click="isSelectChange(false)"
        />
        <img
          v-else
          class="box-bottom-select"
          src="/image/inviteFriends/mining-wxz-icon.svg"
          @click="isSelectChange(true)"
        />
        <div class="box-bottom-text">{{ $t("inviteFriends.jrbzxs") }}</div>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="InviteFriendsTaskPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { JUMPAPPS } from "~/config";
import { useDateFormat } from "@vueuse/core";
import { getLatestStudioLive } from "@/api/reward";
import { useUserStore } from "~~/store/modules/user";
import { getTaskList } from "@/api/bdc";
import { usePageCacheStore } from "../../store/modules/pageCache";

const props = withDefaults(
  defineProps<{
    inviterInfo: any;
    show: boolean;
    forcedDisplay: boolean;
  }>(),
  {
    inviterInfo: {},
    show: false,
    forcedDisplay: false, // 是否强制展示
  }
);

const emit = defineEmits(["update:show", "update:forcedDisplay", "confirm"]);
const firebase = useInitFirebase(); // 初始化
const { t } = useI18n();
const userState = useUserStore();
// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// 今日是否继续展示
const isSelect = ref(false);
const isSelectChange = (val: boolean) => {
  // 1. 保存到本地
  if (val) {
    const day = useDateFormat(Date.now(), "YYYY-MM-DD").value;
    localStorage.setItem(
      userState.$state.sid + "-" + "miningTaskPopupDate",
      day
    );
  } else {
    localStorage.removeItem(userState.$state.sid + "-" + "miningTaskPopupDate");
  }
  // 2. 赋值
  isSelect.value = val;
};

// 是否展示看直播,领取 bdc 任务
const isShowLiveTask = ref(false);
const sccz = ref(null); // 首次充值
const mnjy = ref(null); // 模拟交易
const isShowPopup = ref(false); // 是否显示弹窗
const showPopupWatch = watch(
  () => isShowPopup.value,
  (newVal, oldVal) => {
    if (
      newVal &&
      !localStorage.getItem(userState.$state.sid + "-" + "miningTaskPopupDate")
    ) {
      const day = useDateFormat(Date.now(), "YYYY-MM-DD").value;
      localStorage.setItem(
        userState.$state.sid + "-" + "miningTaskPopupDate",
        day
      );
    }
  }
);

// 监听多个字段的变化
const popupWatch = watch(
  [() => props.show, mnjy, () => props.forcedDisplay],
  (neweVal) => {
    // console.log(
    //   neweVal[0],
    //   "--props.show--",
    //   neweVal[1] && neweVal[1].status,
    // );
    if (neweVal[2] === true) {
      isShowPopup.value = true;
      return;
    }
    // 每天只弹出一次
    const day = localStorage.getItem(
      userState.$state.sid + "-" + "miningTaskPopupDate"
    );
    if (day) return;
    // 没有完成
    if (neweVal[0] && neweVal[1] && neweVal[1].status == 0) {
      const day = localStorage.getItem(
        userState.$state.sid + "-" + "miningTaskPopupDate"
      );
      const curDay = useDateFormat(Date.now(), "YYYY-MM-DD").value;
      // console.log(day, "=========", curDay);
      if (day != curDay) {
        isShowPopup.value = true;
      }
    }
    // 完成所有任务
    else if (neweVal[0] && neweVal[1] && neweVal[1].status == 1) {
      isShowPopup.value = false;
    } else {
      isShowPopup.value = false;
    }
  }
);

onMounted(() => {
  // 1. 查询任务
  getTaskList().then((res) => {
    // 类型: 31 首次充值、43 模拟交易、
    // console.log("任务中心 res:", res);
    if (res) {
      res.tasks.forEach((element: any) => {
        if (element.type == 31) {
          sccz.value = element;
          console.log("首充任务:", element);
        }

        if (element.type == 43) {
          mnjy.value = element;
          console.log("模拟-任务:", element);
        }
      });
    }
  });
  // 2. 桥接
  isShowLiveTask.value = bridgeVersionCheck(JUMPAPPS().lotteryV2YyTaskFilter());
  // 3. 是否选中今天
  const curDay = useDateFormat(Date.now(), "YYYY-MM-DD").value;
  const day = localStorage.getItem(
    userState.$state.sid + "-" + "miningTaskPopupDate"
  );
  isSelect.value = curDay == day;
});
onBeforeUnmount(() => {
  popupWatch && popupWatch();
  showPopupWatch && showPopupWatch();
});

// 关闭弹窗
const closePopup = () => {
  isShowPopup.value = false;
  emit("update:show", false);
  emit("update:forcedDisplay", false);
};
// 获取直播间数据
let liveId = "";
const getLatestStudioLiveRequest = (isAlert = false) => {
  return getLatestStudioLive({
    discoverType: 6,
    areaCode: userState.$state.areaCode,
  }).then((res) => {
    // console.log("直播间数据", res);
    if (res) {
      if (
        res.commonData &&
        res.commonData.discoveryList &&
        res.commonData.discoveryList.length > 0
      ) {
        res.commonData.discoveryList.forEach((e: any) => {
          if (e.data_type == 3 && e.live_status) {
            liveId = e.live_status.live_id;
          }
        });
      }
    }
  });
};
// 页面跳转
const jumpPage = async (type: string, isApp = false) => {
  if (isApp) {
    if (type === "bindAccountList") {
      firebase?.logEvent("BDC_H5_Mining_bindAccountList_Click");
      bridge.jumpAppRoute(JUMPAPPS()[type]);
    } else if (type === "demoMarket") {
      firebase?.logEvent("BDC_H5_Mining_IntegralShop_Click"); // 埋点访问
      bridge.jumpAppRoute(JUMPAPPS()[type]);
    } else if (type == "live") {
      firebase?.logEvent("BDC_H5_Mining_Click_Live_Jump");
      // 1. loading
      showLoadingToast({
        message: `${t("common.requestIng")} ...`,
        forbidClick: true,
        duration: 15000,
        wordBreak: "break-word",
      });
      getLatestStudioLiveRequest(true).then(() => {
        if (liveId) {
          bridge.jumpAppRoute(JUMPAPPS({ liveId: liveId })["liveRoom"]);
        } else {
          showToast(t("activity.zbyjs"));
        }
      });
    }
  } else if (type === "pledge") {
    firebase?.logEvent("BDC_H5_Mining_Pledge_Click");
    const pageCache = usePageCacheStore();
    pageCache.removeData("pledge-recharge-channel");
    navigateI18nTo({
      path: "/pledge/recharge",
    });
  }
};
</script>
<style lang="scss" scoped>
.popupview {
  overflow: initial;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0;
}
.gh {
  position: absolute;
  top: -90 * 2px;
  width: 100vw;
}
.box {
  position: relative;
  width: calc(100% - 25 * 4px);
  height: 460 * 2px;
  background: #fff;
  padding: 15 * 2px;

  margin-left: 25 * 2px;
  border-radius: 12 * 2px;
  &-scroll {
    width: 100%;
    height: 430 * 2px;
    // padding-bottom: 15 * 2px;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  &-title {
    position: relative;
    justify-content: center;
    margin-bottom: 10 * 2px;
    &-second {
      margin-bottom: 20 * 2px;
    }
    &-icon {
      margin: 0 * 2px 12 * 2px;
      margin-top: 4 * 2px;
      width: 10 * 2px;
      height: 10 * 2px;
    }
    &-text {
      font-size: 15 * 2px;
      color: #002853;
      font-weight: 590;
    }
  }

  &-hyfl {
    position: relative;
    padding: 10 * 2px 6 * 2px;
    border-radius: 8 * 2px;
    background: #edf5ff;
    margin-bottom: 20 * 2px;

    &-content {
      position: relative;
      overflow: hidden;
      justify-content: space-between;
      width: 100%;
      border-radius: 12 * 2px;
      padding: 6 * 2px 6 * 2px;

      &-left {
        position: relative;
        z-index: 1;
      }
    }
    &-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    &-info {
      margin-left: 6 * 2px;
      &-bottom {
        padding: 6 * 2px 10 * 2px 6 * 2px 5 * 2px;
        white-space: nowrap;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 0.6) 30.06%,
          rgba(255, 255, 255, 0.6) 70.85%,
          rgba(255, 255, 255, 0) 100%
        );
      }
    }
    &-avatar {
      width: 36 * 2px;
      height: 36 * 2px;
      border-radius: 100px;
      overflow: hidden;
    }
    &-level {
      width: 32 * 2px;
      height: 32 * 2px;
      margin-right: 4 * 2px;
    }
    &-name {
      white-space: nowrap;
      color: #fff;
      font-size: 13 * 2px;
      font-weight: 590;
      &-desc {
        white-space: nowrap;
        color: #002853;
        font-size: 11.5 * 2px;
        font-weight: 400;
      }
      &-value {
        margin-left: 2 * 2px;
        color: #007bff;
        font-size: 11.5 * 2px;
        font-weight: 700;
      }
    }
    &-btn {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 4 * 2px 7 * 2px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
      font-size: 11 * 2px;
      font-weight: 400;
    }
    &-item {
      justify-content: space-between;
      &-left {
        &-img {
          width: 40 * 2px;
          height: 40 * 2px;
          margin-right: 10 * 2px;
        }
      }
      &-title {
        font-size: 13 * 2px;
        color: #141924;
        font-weight: 510;
      }
      &-right {
        &-btn {
          padding: 4 * 2px 12 * 2px;
          font-size: 14 * 2px;
          white-space: nowrap;
          color: #fff;
          font-weight: 590;
          border-radius: 4 * 2px;
          background: #007bff;
        }
        &-img {
          width: 24 * 2px;
          height: 24 * 2px;
        }
      }
    }
  }

  &-xrjl {
    padding: 6 * 2px;
    border-radius: 8 * 2px;
    background: #edf5ff;
    &-item {
      padding: 10 * 2px 6 * 2px;
      margin-bottom: 10 * 2px;
      border-radius: 8 * 2px;
      border: 1px solid #e4ebf4;
      &-left {
        margin-bottom: 8 * 2px;
        padding-bottom: 8 * 2px;
        border-bottom: 0.7px solid rgba(115, 119, 128, 0.15);

        &-img {
          width: 40 * 2px;
          height: 40 * 2px;
          margin-right: 10 * 2px;
        }
        &-title {
          font-size: 13 * 2px;
          color: #141924;
          font-weight: 510;
          margin-bottom: 8 * 2px;
        }
        &-desc {
          font-size: 12 * 2px;
          color: rgba(136, 142, 147, 0.9);
          font-weight: 400;
        }
      }

      &-right {
        &-btn {
          padding: 6 * 2px 12 * 2px;
          font-size: 14 * 2px;
          white-space: nowrap;
          color: #fff;
          font-weight: 590;
          border-radius: 4 * 2px;
          background: #007bff;
        }
        &-img {
          width: 24 * 2px;
          height: 24 * 2px;
        }
      }
      &-bottom {
        justify-content: space-between;
        &-left {
          &-progress {
            width: 88 * 2px;
            height: 8 * 2px;
            border: 1px solid #fff;
            margin-right: 4 * 2px;
          }
          &-bdc {
            font-size: 12 * 2px;
            color: #007bff;
            font-weight: 590;
            margin-right: 8 * 2px;
            &-img {
              width: 16 * 2px;
              height: 16 * 2px;
              margin-right: 4 * 2px;
            }
          }
        }
        &-right {
          padding: 4 * 2px 8 * 2px;
          font-size: 12.5 * 2px;
          white-space: nowrap;
          color: #fff;
          font-weight: 590;
          border-radius: 4 * 2px;
          background: #007bff;
        }
      }
    }
  }
  &-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    justify-content: center;
    padding-bottom: 35px;
    background-color: #fff;
    filter: drop-shadow(0px -4px 16px rgba(0, 0, 0, 0.1));
    border-radius: 0 0 12 * 2px 12 * 2px;

    &-select {
      width: 22 * 2px;
      height: 22 * 2px;
      margin-right: 4 * 2px;
    }
    &-text {
      font-size: 12 * 2px;
      color: rgba(136, 142, 147, 0.9);
      font-weight: 400;
    }
  }
}
.line {
  width: 100%;
  justify-content: center;
  &-left {
    width: 73 * 2px;
    height: 0.7px;
    background-color: #d8e4ff;
  }
  &-text {
    white-space: nowrap;
    font-size: 12 * 2px;
    color: #999da7;
    font-weight: 400;
    margin: 12 * 2px 14 * 2px;
  }
  &-right {
    width: 73 * 2px;
    height: 0.7px;
    background-color: #d8e4ff;
  }
}
.close {
  position: absolute;
  z-index: 99;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}

.popoverMining {
  position: relative;
  z-index: 999998 !important;
  background: transparent !important;
  left: 90 * 2px !important;
  right: 30 * 2px !important;
  &-alert {
    position: relative;
    margin: 0 5vw;
    // max-width: 85vw;
    padding: 6 * 2px 12 * 2px;
    color: #fff;
    font-size: 11 * 2px;
    white-space: pre-wrap;
    background: rgba(10, 31, 106, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 8 * 2px;
    overflow: hidden;
  }
}
</style>
<style lang="scss">
.popoverMining {
  .van-popover__content {
    background: transparent !important;
    box-shadow: none;
  }
  .van-popover__arrow {
    color: rgba(10, 31, 106, 0.4) !important;
    backdrop-filter: blur(0px) !important;
    left: 84% !important;
  }
}
</style>
